브라우저의 렌더링 과정을 왜 알아야 할까?

브라우저의 렌더링 과정은 CRP(Critical Rendering Path) 라고 하는 과정을 거친다. 하지만 우리는 웹사이트를 개발하거나 웹사이트를 볼 때 이러한 과정이 일어난다는것을 알지 못한다.

그렇다면 왜 우리가 브라우저의 렌더링 과정을 알고있어야 할까?

CPR의 과정을 이해함으로써 웹사이트의 LCP를 향상시킬 수 있고, 이는 웹사이트의 성능 향상으로도 이어지기 때문이다. (기술면접에도 나올수 있음)

브라우저의 렌더링 과정

브라우저의 렌더링 과정은 크게 2가지로 나눈다

1. Construction
2. Operation

Construction 과정에서는 DOM + CSSOM , Render Tree 과정을 수행하고

Operation과정에서는 Layout, Paint, Composite 과정을 수행한다.

그럼 지금부터 자세한 과정을 알아보자

1.DOM + CSSOM

1.1 DOM

브라우저가 여러 리소스를 다운로드 한 뒤 HTML을 브라우저가 이해할 수 있는 형태로 바꾸는 parsing 과정을 거친다.

이 과정을 거치면 요소 간의 관계가 Tree 형태로 바뀌는데 이것이 DOM(Docment Object Model) 이다.

1.2 CSSOM

DOM 과 마찬가지로 CSS도 HTML과 비슷한 과정을 거쳐서 브라우저가 이해할 수 있는 형태로 변경된다.

이 과정을 거치면 요소 간의 관계가 Tree 형태로 표현된 CSSOM(CSS Object Model) 로 변한다.

2. Render Tree

Render Tree는 화면에 표시되는 각 요소의 레이아웃을 계산하는데 사용되며 DOM과 CSSOM 의 결합으로 생성된다

display : none 으로 설정되어 화면에 보이지 않는 요소들은 렌더 트리에 포함되지 않지만 , opacity : 0 또는 visibility : hidden 인 요소들은 렌더 트리에 포함된다.

3. Layout

렌더 트리가 완성된 후, Layout 단계로 넘어가게 된다.

이 단계에서는 화면 구성 요소의 위치나 크기를 계산해서 요소를 배치하는 작업을 한다.

4. Paint

Paint 단계에서는 말 그대로 배치된 요소에 색을 채워 넣는 과정을 거친다.

이 과정에서 브라우저는 효율적으로 작업을 하기 위해 구성 요소를 여러개의 레이어로 나누어서 작업하기도 한다.

5.Composite

마지막 단계인 composite 단계에서는 각 레이어를 합성하는 작업을 한다. 이 과정이 끝나면 브라우저에서 HTML과 CSS를 볼수 있게 된다.

마무리

요즘 최적화에 관심이 많아서 최적화 관련 공부를 하며 브라우저의 렌더링 과정을 공부하게 되었는데 처음 알게된 부분들이 많아서 신기했다.

렌더링 과정을 공부하면서 Reflow와 Repaint라는것도 알게 되었는데 기회가 되면 이것과 관련해서도 글을 쓰고 싶다.

단지 코드만 짜는것이 아닌 작동 원리를 이해하며 효율성 있게 개발하는 개발자가 될 때까지 열심히 해야겠다..!